<script lang="ts">
import { defineComponent } from 'vue'
import { Plus } from '@icon-park/vue-next'

export default defineComponent({
  name: 'Index',
  components: { Plus },
  data: function() {
    return {
      userList: null
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      this.loadUserData()
    },
    loadUserData() {
      window.api.User.list({}).then((r) => {
        this.userList = r
      })
    },
    addRandomData() {
      const randomData = {
        id: Math.random().toString(36).substring(2),
        userName: 'user' + Math.random().toString(36).substring(2)
      }
      console.log(randomData)
      window.api.User.add(randomData)
        .then(r => {
          this.loadUserData()
        })
    }
  }
})
</script>

<template>
  <div style="height: 100%">
    <el-space style="padding: 10px">
      <el-button circle @click="addRandomData()">
        <Plus></Plus>
      </el-button>
    </el-space>
    <div style="height: calc(100% - 50px)">
      <el-table :data="userList" :height="'100%'" style="background: none">
        <el-table-column label="userId" prop="id"></el-table-column>
        <el-table-column label="userName" prop="userName"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped lang="less"></style>
